<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="SyntaxHighlighter.css" rel="stylesheet" type="text/css" />
<style type="text/css"><!--
p.MsoNormal {margin:0cm;
margin-bottom:.0001pt;
text-autospace:none;
font-size:10.0pt;
font-family:Arial;}
.style1 {color: #FF0000}
-->
</style>
<style type="text/css">
<!--
table.MsoNormalTable {
font-size:10.0pt;
font-family:"Times New Roman";
}
-->
</style>
</head>

<body>
<p class="MsoNormal" style="background:white; margin-bottom: .0001pt;"><span class="MsoNormal" style="background:white;"><img src="saibamais.jpg" width="270" height="50" alt="Saiba Mais" /></span></p>
<p class="MsoNormal" style="background:white; margin-bottom: .0001pt;"></p>
<p class="MsoNormal" style="background:white; margin-bottom: .0001pt;"><strong><span style="font-size:12.0pt; ">Ponto de verifica</span></strong><strong><span style="font-size:12.0pt; ">&ccedil;&atilde;</span></strong><strong><span style="font-size:12.0pt; ">o 9.4</span></strong></p>
<p class="MsoNormal" style="margin-top:6.0pt;margin-right:49.9pt;margin-bottom:.0001pt;margin-left:1.0cm;line-height:12.0pt;background:white;"><span style="font-size:12.0pt; ">Criar uma seq</span><span style="font-size:12.0pt; ">&uuml;&ecirc;</span><span style="font-size:12.0pt; ">ncia l</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">gica de tabula</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o para percorrer links, controles de formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rios e objetos.</span></p>
<p class="MsoNormal" style="margin-top:9.85pt;line-height:12.0pt;background:white;"><span style="letter-spacing:-.1pt; font-size:12.0pt; ">A  tecla TAB </span><span style="font-size:12.0pt; ">&eacute;</span><span style="font-size:12.0pt; "> usada tamb</span><span style="font-size:12.0pt; ">&eacute;</span><span style="font-size:12.0pt; ">m, dentro do navegador para se movimentar dentro das p</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">ginas. Com  isso elas devem ser dispostas para que sejam navegadas de forma linear. O  comando TABINDEX permite que voc</span><span style="font-size:12.0pt; ">&ecirc;</span><span style="font-size:12.0pt; "> estabele</span><span style="font-size:12.0pt; ">&ccedil;</span><span style="font-size:12.0pt; ">a uma ordem  l</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">gica. O TABINDEX trabalha com os </span><span style="letter-spacing:-.15pt; font-size:12.0pt; ">elementos &lt;A&gt;, &lt;AREA&gt;, &lt;BUTTON&gt;,  &lt;INPUT&gt;, &lt;OBJECT&gt;, &lt;SELECT&gt; e &lt;TEXTAREA&gt;.</span></p>
<p class="MsoNormal" style="margin-top:11.75pt;margin-right:0cm;margin-bottom:.0001pt;margin-left:.25pt;line-height:12.0pt;background:white;"><strong><span style="font-size:12.0pt; ">Utiliza</span></strong><strong><span style="font-size:12.0pt; ">&ccedil;&atilde;</span></strong><strong><span style="font-size:12.0pt; ">o de TABINDEX:</span></strong></p>
<p class="MsoNormal" style="margin-top:6.0pt;line-height:12.0pt;background:white;"><span style="font-size:12.0pt; ">A distribui</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o/disposi</span><span style="font-size:12.0pt; ">&ccedil;&atilde;</span><span style="font-size:12.0pt; ">o  dos campos no formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rio do exemplo que se  segue est</span><span style="font-size:12.0pt; ">&aacute; </span><span style="font-size:12.0pt; ">intencionalmente  embaralhada. No entanto, o c</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">digo de TABINDEX coloca uma ordem l</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">gica </span><span style="letter-spacing:-.05pt; font-size:12.0pt; ">para os campos; ao usar a tecla  TAB eles surgem na ordem </span><span style="font-size:12.0pt; ">&ldquo;</span><span style="font-size:12.0pt; ">correta</span><span style="font-size:12.0pt; ">&rdquo;</span><span style="font-size:12.0pt; "> (para navegadores que </span><span style="font-size:12.0pt; ">suportam o atributo tabkey - de fato, este exemplo espec</span><span style="font-size:12.0pt; ">&iacute;</span><span style="font-size:12.0pt; ">fico apenas funciona (ou trabalha <span style="letter-spacing:-.05pt; ">tal como o autor espera) se estiver usando o  Internet Explorer 4.0 ou posterior):</span></span></p>
<p class="MsoNormal" style="margin-top:11.5pt;margin-right:0cm;margin-bottom:.0001pt;margin-left:.25pt;line-height:9.85pt;background:white;"><strong><span style="letter-spacing:-.25pt; font-family:'Courier New'; ">&lt;form method=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;post&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> action=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">home.htm</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">&gt;</span></strong> </p>
<p class="MsoNormal" style="margin-top:0cm;margin-right:133.15pt;margin-bottom:.0001pt;margin-left:36.0pt;text-indent:-35.75pt;line-height:9.85pt;background:white;"><strong><span style="letter-spacing:-.2pt; font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">submit</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> value=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">Enviar</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong><span style="letter-spacing:-.2pt; ">tabindex=</span></strong><strong>&rdquo;6</strong><strong>&rdquo; </strong>/&gt;&lt;br /&gt;<strong> </strong><strong><span style="font-family:'Courier New'; ">Qual </span></strong><strong><span style="font-family:'Courier New'; ">&eacute;</span></strong><strong><span style="font-family:'Courier New'; "> a sua cor favorita?&lt;br /&gt;</span></strong></p>
<p class="MsoNormal" style="margin-left:36.0pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; ">Vermelho &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">checkbox</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> name=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">CB1</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> value=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">CheckBox1</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong><span style="letter-spacing:-.25pt; ">tabindex=</span></strong><strong>&rdquo;3</strong><strong>&rdquo; </strong>/&gt;&lt;br /&gt;<strong> </strong><strong><span style="font-family:'Courier New'; ">Verde &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">checkbox</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> name=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">CB2</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> value=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">CheckBox2</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong>tabindex=</strong><strong>&rdquo;4</strong><strong>&rdquo; </strong>/&gt;&lt;br /&gt;<strong> <br />
  </strong><strong><span style="font-family:'Courier New'; ">Azul &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">checkbox</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> name=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">CB3</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> VALUE=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">CheckBox3</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong>tabindex=</strong><strong>&rdquo;5</strong><strong>&rdquo; </strong>/&gt;&lt;br /&gt;<strong> <br />
</strong><strong><span style="letter-spacing:-.3pt; font-family:'Courier New'; ">Nome da empresa &lt;input type=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">text</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> name=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">Tboxin</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong><span style="letter-spacing:-.3pt; ">tabindex=</span></strong><strong>&rdquo;2</strong><strong>&rdquo;&nbsp; </strong><strong><span style="font-family:'Courier New'; ">size=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">20</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo; /</span></strong><strong><span style="font-family:'Courier New'; ">&gt;&lt;br /&gt;</span></strong></p>
<p class="MsoNormal" style="margin-left:.25pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></strong><strong><span style="font-family:'Courier New'; ">&lt;input type=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">reset</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> value=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">Apagar</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong>tabindex=</strong><strong>&rdquo;7&rdquo;</strong><strong><span style="font-family:'Courier New'; ">&gt;&lt;br /&gt;</span></strong> </p>
<p class="MsoNormal" style="margin-left:36.0pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; ">&lt;a href=</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; ">form-alt.htm</span></strong><strong><span style="font-family:'Courier New'; ">&rdquo;</span></strong><strong><span style="font-family:'Courier New'; "> </span></strong><strong>tabindex=</strong><strong>&rdquo;1</strong><strong>&rdquo;&gt;</strong>Salte<strong>&nbsp; </strong><strong><span style="font-family:'Courier New'; ">este formul</span></strong><strong><span style="font-family:'Courier New'; ">&aacute;</span></strong><strong><span style="font-family:'Courier New'; ">rio para ver as</span></strong></p>
<p class="MsoNormal" style="margin-left:.25pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alternativas acess&iacute;veis&lt;/a&gt;</span></strong></p>
<p class="MsoNormal" style="margin-left:.25pt;line-height:9.85pt;background:white;"><strong><span style="font-family:'Courier New'; ">&lt;/form&gt;</span></strong></p>
<p class="MsoNormal" style="margin-top:22.1pt;line-height:12.0pt;background:white;"><span style="font-size:12.0pt; ">Apesar  de poder controlar a ordem da tecla TAB, o ideal </span><span style="font-size:12.0pt; ">&eacute;</span><span style="font-size:12.0pt; "> que voc</span><span style="font-size:12.0pt; ">&ecirc;</span><span style="font-size:12.0pt; "> crie os  formul</span><span style="font-size:12.0pt; ">&aacute;</span><span style="font-size:12.0pt; ">rios de </span><span style="font-size:12.0pt; ">forma l</span><span style="font-size:12.0pt; ">&oacute;</span><span style="font-size:12.0pt; ">gica.</span></p>
<span style="letter-spacing:-.05pt; font-family:Arial; font-size:12.0pt; "><br clear="all" style="page-break-before:always;" />
</span>
<p class="MsoNormal" style="margin-top:35.75pt;line-height:12.0pt;background:white;">&nbsp;</p>
</body>
</html>
